<template>
  <div>
      <el-dialog
        title="批量设置"
        :visible.sync="lotSizeSetDialogVisible"
        width="30%"
        center
        @close="dialogClose"
        >
        <div style="text-align: center;">
          批量设置:
          <input
            v-model="lotSizeSetDefNumber"
            placeholder="项目最大通过数"
            class="el-input__inner"
            style="width: 200px;"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="dialogSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <div id="SearchQuery">
        <el-row>
          <el-col :span="12">
            搜索:
            <input
              v-model="keywords"
              placeholder="请输入学院名称"
              class="el-input__inner"
              style="width: 200px;"
            />
          </el-col>
          <el-col :span="12">
            <div style="text-align: right;" >
              <el-button type="primary" @click="lotSizeSet">批量设置</el-button>
              <el-button type="warning" @click="toggleSelection()">取消选择</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-table
        border
        ref="multipleTable"
        :data="showTable"
        :row-key="getRowKey"
        tooltip-effect="dark"
        style="width: 100%"
        @row-dblclick="dbclick"
        @selection-change="handleSelectionChange"
        :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        >

        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55">
        </el-table-column>
        <el-table-column
          label="学院"
          width="300px"
         >
          <template slot-scope="scope">{{ scope.row.depName }}</template>
        </el-table-column>
        <el-table-column
          label="项目最大通过数"
         >
           <template slot-scope="scope">
             <span v-if="scope.row.isEmpower==1">
               <el-input v-if="scope.row.isOK"
               v-focus
               v-model="scope.row.maxPronum"
               style="width:100%;hight:100%"
               @blur="blurEvent(scope.row)"
               ></el-input>
               <span v-else>{{scope.row.maxPronum}}</span>
             </span>
             <span v-else>
               无
             </span>
           </template>
        </el-table-column>
        <el-table-column
          label="授权操作"
          width="300px"
         >
           <template slot-scope="scope">
              <el-switch
               v-model="scope.row.isEmpower"
               :active-value="1"
               :inactive-value="0"
               @change="empower(scope.$index, scope.row)"
              >
              </el-switch>
           </template>
        </el-table-column>

      </el-table>

      <div class="resource-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pagesize"
          layout=" prev, pager, next,sizes, jumper"
          :total="filterDataShow.length"
        >
        </el-pagination>
      </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        batchId:'',
        keywords: "", // 搜索的关键字
        filterDataShow: [], //储存符合条件的数据
        pagesize: 10,
        currentPage: 1,
        tableData: [],
        multipleSelection: [],
        lotSizeSetDialogVisible: false,
        lotSizeSetDefNumber:0,
        AllProjectNumAxios:[]
      }
    },
    mounted() {
      this.getDataAxios()
    },
    methods:{
      getRowKey(row){
        return row.numProId
      },
            empower(index,row){
              console.log(row)
              this.$api.department.editDepartment({
                isEmpower:row.isEmpower,
                numProId:row.numProId
              }).then((response)=>{
                console.log(response)
                if(response.data.code==200){
                  this.$message({
                    type: 'success',
                    message: '更新成功! ',
                    duration: 1000,
                    offset:screen.height/2-200,
                    showClose: true,
                    center:true
                  })
                }
              })
            },
            getDataAxios() {

                this.batchId=this.$route.query.batch_id;
                //获取所有项目数信息
                this.$api.project.getAllNumProject({
                    batchId:this.batchId
                }).then((response)=>{
                  console.log(response)
                  this.AllProjectNumAxios=response.data.data
                  this.AllProjectNumAxios.forEach((item)=>{
                     this.$set(item,'isOK',false)
                  })
                  this.searchResource();
                  console.log(this.AllProjectNumAxios)
                })
            },
            toggleSelection(rows) {
              if (rows) {
                rows.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row);
                });
              } else {
                this.$refs.multipleTable.clearSelection();
              }
            },
            handleSelectionChange(val) {
              this.multipleSelection = val;
            }
            ,
            //查询
            searchResource() {
              //将当前页设置为1，确保每次都是从第一页开始搜
              this.currentPage = 1;
              let filterKeywords = this.keywords.trim();
              let filerReasource = this.AllProjectNumAxios.filter((item) => {
                //过滤全部数据
                if (item.depName.includes(filterKeywords)) {
                  return item;
                }
              });
              //将符合条件的内容赋给filterDataShow
              this.filterDataShow = filerReasource;
              },
              handleSizeChange(psize) {
                this.pagesize = psize;
              },
              handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
              },
              dbclick(row, event, column){
                  console.log(row)
                  row.isOK =!row.isOK

                },
            //当失去焦点，关闭
            blurEvent(row){
              var numReg = /^[0-9]*$/
              var numRe = new RegExp(numReg)
              if (!numRe.test(row.maxPronum)) {
                this.$message({
                  type: 'warning',
                  message: '请输入数字! ',
                  duration: 1000,
                  offset:screen.height/2-200,
                  showClose: true,
                  center:true
                })
                return false
              }

              if (row.maxPronum=='') {
                this.$message({
                  type: 'warning',
                  message: '项目最大通过数不能为空! ',
                  duration: 1000,
                  offset:screen.height/2-200,
                  showClose: true,
                  center:true
                })
                return false
              }
              for(let i = 0 ;i<this.AllProjectNumAxios.length;i++){
                if(row.depId==this.AllProjectNumAxios[i].depId){
                    this.$api.project.setNumProject({
                      maxPronum:row.maxPronum,
                      numProId:this.AllProjectNumAxios[i].numProId
                    }).then((response)=>{
                      console.log(response)
                      if(response.data.code==200){
                        this.$message({
                          type: 'success',
                          message: '更新成功! ',
                          duration: 1000,
                          offset:screen.height/2-200,
                          showClose: true,
                          center:true
                        })
                      }
                    })
                }
              }

              row.isOK= !row.isOK
            },
            lotSizeSet(){
              if(this.multipleSelection.length == 0){
                this.$message({
                type: 'warning',
                offset:screen.height/2-200,
                center:true,
                message: '请至少选择一个学院!'
                });
                return
              }

              for(let i = 0 ;i<this.multipleSelection.length ; i++){
                if(this.multipleSelection[i].isEmpower==0){
                  this.$message({
                  type: 'warning',
                  offset:screen.height/2-200,
                  center:true,
                  message: '请勿选择未授权的学院!'
                  });
                  return
                }
              }
              this.lotSizeSetDialogVisible=true

            },
            dialogSubmit(){
              var numReg = /^[0-9]*$/
              var numRe = new RegExp(numReg)
              if (!numRe.test(this.lotSizeSetDefNumber)) {
                this.$message({
                  type: 'warning',
                  message: '请输入数字 ',
                  duration: 1000,
                  offset:screen.height/2-200,
                  showClose: true,
                  center:true
                })

                return false
              }

               if (this.lotSizeSetDefNumber=='') {
                 this.$message({
                   type: 'warning',
                   message: '项目最大通过数不能为空 ',
                   duration: 1000,
                   offset:screen.height/2-200,
                   showClose: true,
                   center:true
                 })
                 return false
               }

               //拆除id和num传给后台
              var tempDataId=[]
              var tempDataNum=[]
              for(let i=0;i<this.multipleSelection.length;i++){
                for(let j=0;j<this.AllProjectNumAxios.length;j++){
                  if(this.multipleSelection[i].depId==this.AllProjectNumAxios[j].depId){
                    console.log(this.AllProjectNumAxios[j])
                    tempDataId.push(this.AllProjectNumAxios[j].numProId)
                    tempDataNum.push(this.lotSizeSetDefNumber)
                  }
                }
              }

              //数据库更新
              this.$api.project.setNumProjects({
                  maxPronums:tempDataNum.toString(),
                  numProIds:tempDataId.toString()
              }).then((response)=>{
                console.log(response)
              })

              //页面更新
              for(let i=0;i<this.multipleSelection.length;i++){
                for(let j=0;j<this.AllProjectNumAxios.length;j++){
                  if(this.multipleSelection[i].depId==this.AllProjectNumAxios[j].depId){
                    this.AllProjectNumAxios[j].maxPronum=this.lotSizeSetDefNumber
                  }
                }
              }

              this.$message({
              type: 'success',
              offset:screen.height/2-200,
              center:true,
              message: '修改成功!'
              });
              this.$refs.multipleTable.clearSelection();
              this.lotSizeSetDefNumber=0
              this.multipleSelection=[]
              this.lotSizeSetDialogVisible=false
            },
            dialogClose(){
              this.$refs.multipleTable.clearSelection();
              this.lotSizeSetDefNumber=0
              this.multipleSelection=[]
              this.lotSizeSetDialogVisible=false
            }
      },
    watch: {
      //监听搜索框内容，当搜索框内容发生变化时调用searchResource方法
      keywords() {
        this.searchResource();
      },
    },
    computed: {
      //showTable计算属性通过slice方法计算表格当前应显示的数据
      showTable() {
        return this.filterDataShow.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
      },
    },
  }
</script>

<style scoped>
  #SearchQuery{
    margin-bottom: 20px;
  }
</style>
